<template>
  <CommonCard title="今日用户数" :value="numberFormat(orderUser)">
    <div ref="barChartRef" style="width:100%;height:100%"></div>
    <template #footer>
      <span>退货率</span>
      <span class="emphasis">{{returnRate}}%</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import {useReportDataStore} from '@/stores/reportData'
import CommonCard from "./CommonCard.vue";
import useFormat from "@/hooks/useFormat"
import { computed , watch} from '@vue/runtime-core';
const {numberFormat,moneyFormat} = useFormat()
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'
import type {EChartsType} from 'echarts'
export default {
    name:'TodayUsers',
    components:{CommonCard}
}
</script>
<script lang="ts" setup>
const reportDataStore = useReportDataStore()
// orderUser:182425
// orderUserTrend:Array[14]
// orderUserTrendAxis:Array[14]
// returnRate:5.91
const orderUser = computed(()=>reportDataStore.reportData.orderUser)
const returnRate = computed(()=>reportDataStore.reportData.returnRate)
const orderUserTrend = computed(()=>reportDataStore.reportData.orderUserTrend)
const orderUserTrendAxis = computed(()=>reportDataStore.reportData.orderUserTrendAxis)
  // 定义页面中的标签对象
const barChartRef = ref();
let barChart: EChartsType;
const getOption = () => {
  return {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    xAxis: {
      // boundaryGap: false, // X轴两侧不留白
      // show:false, // 不显示水平值
      data: orderUserTrendAxis.value// x轴数据列表
    },
    yAxis: {
      show: false // 垂直那些线也不要
    },
    series: [
      {
        type: 'bar',
        // data: orderTrend.value,
        data: orderUserTrend.value,
        // 将折线设置成平滑的曲线
      }
    ],
     // 显示提示
    tooltip: {
      trigger: 'axis',
      confine: true
    }
  };
};

onMounted(() => {
  // ref格式的数据，在setup中使用的时候，一定要通过.value的方式来使用
  barChart = echarts.init(barChartRef.value);

  // 实现响应式效果
  window.addEventListener('resize',()=>{
    barChart&&barChart.resize()
  })
});

watch(orderUser, () => {
  barChart.setOption(getOption());
});
</script>

<style lang = 'scss' scoped>
   
</style>